<script>
import { TABLE_ENUM } from "@/components/table/enum";

export default {
  name: "columnFilterTags",
  computed: {
    TABLE_ENUM() {
      return TABLE_ENUM;
    }
  },
  props: {
    columns: {
      type: Array,
      required: true
    }
  },
  data() {
    return {};
  },
  methods: {
    closeItem(item) {
      this.$parent.$refs[item.getRef()][0].clearValue();
      this.$emit("closeItem");
    }
  }
};
</script>

<template>
  <div>
    <div v-if="columns.length !== 0">
      <el-tag v-if="item.filterValueActive()" style="margin-right: 5px;" effect="dark" type="info" size="small"
              v-for="(item,index) in columns"
              closable
              @close="closeItem(item)">
        <span style="margin-right: 5px;font-weight: bold">
          {{ item.label }}
          <span
            v-if="item.filterMode === TABLE_ENUM.FilterModeEnum.INTEGER_SCOPE
            || item.filterMode === TABLE_ENUM.FilterModeEnum.PERCENTAGE_SCOPE
            || item.filterMode === TABLE_ENUM.FilterModeEnum.DATE_SCOPE"
          >
            {{ item.filterValue[0] + " ~ " + item.filterValue[1] + " 之间" }}
          </span>
        </span>
      </el-tag>
    </div>
  </div>
</template>

<style scoped>

</style>